<template>
  <div class="menu-warpper">
    <transition name="slide-up">
      <div class="menu-wrapper" :class="{'hide-box-shadow': !get_menu_visible || get_setting_visible >= 0}" v-show="get_menu_visible">
        <div class="icon-wrapper">
          <span class="icon-menu" @click="showSetting(3)"></span>
        </div>
        <div class="icon-wrapper">
          <span class="icon-progress" @click="showSetting(2)"></span>
        </div>
        <div class="icon-wrapper">
          <span class="icon-bright" @click="showSetting(1)"></span>
        </div>
        <div class="icon-wrapper">
          <span class="icon-A" @click="showSetting(0)"></span>
        </div>
      </div>
    </transition>
    <ebook-setting-font />
    <font-family />
    <font-theme />
  </div>
</template>

<script>
import { ebookMixin } from 'js/mixin'
import EbookSettingFont from './EbookSettingFont'
import fontFamily from './EbookSettingFontFamily'
import fontTheme from './EbookSettingTheme'
export default {
  mixins: [ebookMixin],
  components: {
    EbookSettingFont,
    fontFamily,
    fontTheme
  },
  methods: {
    showSetting(key) {
      this.set_setting_visible(key)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/global'
  .menu-wrapper
    position: absolute
    bottom: 0
    left: 0
    z-index: 200
    display: flex
    width: 100%
    height: px2rem(48)
    background: white
    box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15)
    font-size: .4rem
    &.hide-box-shadow
      box-shadow: none
    .icon-wrapper
      flex: 1
      Center()
      .icon-progress
        font-size: px2rem(24)
      .icon-bright
        font-size: px2rem(22)
</style>
